<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OAuth - 确认授权</title>
    <script src="/js/tailwind.js"></script>
    <link href="/css/font-awesome.min.css" rel="stylesheet">
    <link rel='stylesheet' href='/css/tailwind.min.css'>
    <link rel="stylesheet" href="/css/toastr.min.css">
    <script src="/js/jquery.min.js"></script>
    <script src="/js/toastr.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#4080FF',
                        accent: '#0FC6C2',
                        dark: '#1D2129',
                        light: '#F2F3F5',
                        muted: '#86909C',
                        danger: '#F53F3F'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-gradient-primary {
                background: linear-gradient(135deg, #165DFF 0%, #4080FF 100%);
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .card-shadow {
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            }
            .btn-hover {
                @apply hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-200;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 min-h-screen flex items-center justify-center p-4">
<div class="w-full max-w-6xl mx-auto">
    <div class="flex flex-col md:flex-row rounded-2xl overflow-hidden shadow-2xl bg-white">
        <!-- 左侧图片区域 -->
        <div class="w-full md:w-2/5 bg-gradient-primary p-8 md:p-12 text-white relative overflow-hidden">
            <div class="absolute inset-0 opacity-10">
                <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
                    <path fill="#FFFFFF" d="M37.9,-65.8C49.6,-59.9,60.3,-49.9,66.9,-37.7C73.5,-25.5,76,-11.1,75.2,2.7C74.3,16.5,70.2,29.6,62.2,39.9C54.2,50.2,42.4,57.7,28.8,62.2C15.2,66.7,-0.5,68.2,-14.9,64.9C-29.3,61.6,-42.4,53.5,-56.1,44.3C-69.8,35.1,-84.1,24.9,-89.7,11.9C-95.3,-1.1,-92.2,-15.6,-83.6,-27.7C-75,-39.8,-60.9,-49.4,-46.4,-55.7C-31.9,-62,-16,-65,0.7,-67.1C17.4,-69.2,34.9,-70.4,47.9,-65.8Z" transform="translate(100 100)" />
                </svg>
            </div>
            <div class="relative z-10 h-full flex flex-col justify-between">
                <div>
                    <div class="w-12 h-12 rounded-lg bg-white/20 flex items-center justify-center mb-6">
                        <i class="fa fa-key text-white text-xl"></i>
                    </div>
                    <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4 text-shadow">确认授权</h2>
                    <p class="text-white/80 text-lg mb-8">${appName} 请求访问您的账户信息</p>
                </div>
                <div>
                    <h3 class="text-xl font-semibold mb-2">应用信息</h3>
                    <p class="text-white/70 mb-6">ID: ${clientId}</p>
                    <div class="h-32 bg-white/10 rounded-lg backdrop-blur-sm flex items-center justify-center">
                        <img src="${appIcon}" alt="应用图标" class="max-h-24 max-w-24 object-contain">
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧授权信息区域 -->
        <div class="w-full md:w-3/5 p-8 md:p-12 flex flex-col justify-center">
            <div class="max-w-md mx-auto w-full">
                <div class="mb-8">
                    <h1 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark mb-2">请求权限</h1>
                    <p class="text-muted">请确认以下权限请求</p>
                </div>

                <div class="bg-gray-50 rounded-xl p-6 mb-8 border border-gray-100">
                    <div class="flex items-center mb-4">
                        <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                            <i class="fa fa-shield"></i>
                        </div>
                        <div class="ml-4">
                            <h3 class="font-semibold text-dark">应用ID</h3>
                            <p class="text-muted text-sm">${clientId}</p>
                        </div>
                    </div>

                    <div class="mt-6">
                        <h3 class="font-semibold text-dark mb-4">需要访问的权限</h3>
                        <div class="space-y-3">
                            <#list scope as being>
                                <div class="flex items-center p-3 bg-white rounded-lg border border-gray-100">
                                    <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-3">
                                        <i class="fa fa-check text-sm"></i>
                                    </div>
                                    <div class="flex-1">
                                        <span class="text-sm font-medium text-dark">${being}</span>
                                    </div>
                                </div>
                            </#list>
                        </div>
                    </div>
                </div>

                <div class="text-sm text-gray-500 mb-8">
                    <p>通过授权，您同意 ${appName} 访问上述权限。您可以随时在账户设置中撤销这些权限。</p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <button type="button" onclick="no()" class="w-full py-3 px-4 bg-white border border-gray-200 rounded-lg text-dark font-medium hover:bg-gray-50 btn-hover flex items-center justify-center">
                        <i class="fa fa-times mr-2"></i>
                        <span>拒绝</span>
                    </button>
                    <button type="button" onclick="yes()" class="w-full py-3 px-4 bg-primary hover:bg-primary/90 text-white font-medium rounded-lg btn-hover flex items-center justify-center">
                        <i class="fa fa-check mr-2"></i>
                        <span>同意授权</span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="mt-6 text-center text-gray-500 text-sm">
        <p>© 2025 安全认证中心. 保留所有权利.</p>
    </div>
</div>

<script>
    // 配置toastr
    toastr.options = {
        "closeButton": true,
        "debug": false,
        "newestOnTop": false,
        "progressBar": true,
        "positionClass": "toast-top-right",
        "preventDuplicates": false,
        "onclick": null,
        "showDuration": "300",
        "hideDuration": "1000",
        "timeOut": "5000",
        "extendedTimeOut": "1000",
        "showEasing": "swing",
        "hideEasing": "linear",
        "showMethod": "fadeIn",
        "hideMethod": "fadeOut"
    }

    // 从url中查询到指定名称的参数值
    function getParam(name, defaultValue) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == name) { return pair[1]; }
        }
        return (defaultValue == undefined ? null : defaultValue);
    }

    // 在url上拼接上kv参数并返回
    function joinParam(url, parameStr) {
        if (parameStr == null || parameStr.length == 0) {
            return url;
        }
        var index = url.indexOf('?');
        // ? 不存在
        if (index == -1) {
            return url + '?' + parameStr;
        }
        // ? 是最后一位
        if (index == url.length - 1) {
            return url + parameStr;
        }
        // ? 是其中一位
        if (index > -1 && index < url.length - 1) {
            // 如果最后一位不是&, 且 parameStr 第一位不是&, 就增加一个&
            if (url.lastIndexOf('&') != url.length - 1 && parameStr.indexOf('&') != 0) {
                return url + '&' + parameStr;
            } else {
                return url + parameStr;
            }
        }
        return url;
    }

    // 同意授权
    function yes() {
        console.log('授权请求发送...');
        // 显示加载状态
        var btn = document.querySelector('button[type="button"]:nth-child(2)');
        btn.disabled = true;
        btn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 处理中...';

        $.ajax({
            url: '/${appId}/oauth2/doConfirm',
            method: "POST",
            data: {
                nonce: getParam('nonce'),
                client_id: getParam('client_id'),
                scope: getParam('scope'),
                // 以下四个参数必须一起出现
                build_redirect_uri: true,
                response_type: getParam('response_type'),
                redirect_uri: getParam('redirect_uri'),
                state: getParam('state'),
            },
            dataType: 'json',
            success: function(res) {
                console.log('授权响应:', res);
                // 恢复按钮状态
                btn.disabled = false;
                btn.innerHTML = '<i class="fa fa-check mr-2"></i><span>同意授权</span>';

                if (res.code === 200) {
                    toastr.success('授权成功！正在重定向...');
                    setTimeout(function() {
                        if (res.redirect_uri) {
                            location.href = decodeURIComponent(res.redirect_uri);
                        } else {
                            location.reload();
                        }
                    }, 1000);
                } else {
                    toastr.error('授权失败: ' + (res.msg || '未知错误'));
                }
            },
            error: function(e) {
                // 恢复按钮状态
                btn.disabled = false;
                btn.innerHTML = '<i class="fa fa-check mr-2"></i><span>同意授权</span>';

                console.log('授权请求出错:', e);
                toastr.error('服务器连接失败，请稍后再试');
            }
        });
    }

    // 拒绝授权
    function no() {
        var url = joinParam(getParam('redirect_uri'), "handle=refuse&msg=用户拒绝了授权");
        location.href = url;
    }

    // 添加按钮动画效果
    document.querySelectorAll('button').forEach(btn => {
        btn.addEventListener('click', () => {
            btn.classList.add('scale-95');
            setTimeout(() => {
                btn.classList.remove('scale-95');
            }, 150);
        });
    });
</script>
</body>
</html>
